<script setup>
import { onMounted, ref } from 'vue'
import { fabric } from 'fabric'
const canvasRef = ref()
function init() {
  canvasRef.value = new fabric.Canvas('c') // 这里传入的是canvas的id

  // 设置背景图
  // 参数1：背景图资源（可以引入本地，也可以使用网络图）
  // 参数2：设置完背景图执行以下重新渲染canvas的操作，这样背景图就会展示出来了
  canvasRef.value.setBackgroundImage(
    'https://imgs.bestwehotel.com/images/inn/1gmkV02Tnb',
    canvasRef.value.renderAll.bind(canvasRef.value)
  )

  // 创建一个长方形
  const rect = new fabric.Rect({
    top: 30, // 距离容器顶部 30px
    left: 30, // 距离容器左侧 30px
    width: 100, // 宽 100px
    height: 60, // 高 60px
    fill: 'red' // 填充 红色
  })

  // 圆形
  const circle = new fabric.Circle({
    radius: 30, // 圆的半径
    top: 30, // 距离容器顶部 20px
    left: 140, // 距离容器左侧 20px
    fill: 'pink' // 填充 粉色
  })

  // 在canvas画布中加入矩形（rect）。add是“添加”的意思
  canvasRef.value.add(rect)
  canvasRef.value.add(circle)

  console.log('dataURL: ', canvasRef.value.toDataURL('png'))

  canvasRef.value.requestRenderAll()


}
function exportCanvas() {
  // console.log(canvasRef.value, canvasRef.value.toDataURL);
  // const dataURL = canvasRef.value.toDataURL({
  //   width: canvasRef.value.width,
  //   height: canvasRef.value.height,
  //   left: 0,
  //   top: 0,
  //   format: 'png',
  // });

  // const link = document.createElement('a');
  // link.download = 'canvas.png';
  // link.href = dataURL;
  // document.body.appendChild(link);
  // link.click();
  // document.body.removeChild(link);
}
// 需要在页面容器加载完才能开始初始化（页面加载完才找到 canvas 元素）
onMounted(() => {
  init() // 执行初始化函数
})
</script>

<template>
  <main>
    <div class="box">
      <h2>我是主页</h2>
      <button @click="exportCanvas" class="exportBtn">导出</button>
    </div>
    <canvas width="400" height="400" id="c" style="border: 1px solid #ccc;"></canvas>
  </main>
</template>
